<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="高级搜索"
    width="720"
    draggable
    @close="close"
  >
    <VForm ref="formRef" v-bind="tableOptins">
      <template #form="{ form }">
        <el-form
          :model="form"
          label-align="right"
          label-width="100"
          size="default"
          label-position="top"
        >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="产品来源">
                <el-select
                  v-model="form.goods_source"
                  clearable
                  placeholder="请选择"
                  class="w-full"
                >
                  <el-option
                    v-for="item in props.options['goods.GoodsSpu']?.[0].goodsSourceText"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物流属性">
                <select-logistics
                  class="w-full"
                  v-model="form.logistics_attributess"
                  placeholder="请选择"
                ></select-logistics>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="品牌类型">
                <el-select
                  v-model="form.brand_type"
                  clearable
                  placeholder="请选择"
                  class="w-full"
                >
                  <el-option
                    v-for="item in props.options['goods.GoodsSpu']?.[0].brandTypeText"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="产品品牌">
                <select-brand
                  class="w-full"
                  v-model="form.brand_id"
                  :multiple="true"
                  placeholder="请选择"
                ></select-brand>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商">
                <select-supplie
                  class="w-full"
                  v-model="form.supplier_id"
                  placeholder="供应商"
                ></select-supplie>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采购价">
                <VGroup>
                  <el-select
                    v-model="form.purchaseRange.type"
                    placeholder="请选择"
                    style="width: 90px"
                  >
                    <el-option
                      v-for="item in purchaseList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-input-number
                    v-model="form.purchaseRange.start"
                    :controls="false"
                    placeholder="输入"
                    style="width: 80px"
                  />
                  <div class="v-group-item"><svg-icon icon-class="qujian" /></div>
                  <el-input-number
                    v-model="form.purchaseRange.end"
                    :controls="false"
                    placeholder="输入"
                    style="width: 80px"
                  />
                  <div class="v-group-item">CNY</div>
                </VGroup>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重量">
                <VGroup>
                  <el-select
                    v-model="form.weightRange.type"
                    placeholder="请选择"
                    style="width: 90px"
                  >
                    <el-option
                      v-for="item in weightList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-input-number
                    v-model="form.weightRange.start"
                    :controls="false"
                    placeholder="输入"
                    style="width: 90px"
                  />
                  <div class="v-group-item"><svg-icon icon-class="qujian" /></div>
                  <el-input-number
                    v-model="form.weightRange.end"
                    :controls="false"
                    placeholder="输入"
                    style="width: 90px"
                  />
                  <div class="v-group-item">G</div>
                </VGroup>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品标签">
                <el-select
                  v-model="form.goods_tag"
                  clearable
                  placeholder="请选择"
                  class="w-full"
                  multiple
                >
                  <el-option
                    v-for="item in props.options['goods.GoodsSpu']?.[0].goodsTagText"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否需要证书">
                <el-select
                  v-model="form.authentication"
                  clearable
                  placeholder="请选择"
                  class="w-full"
                >
                  <el-option
                    v-for="item in props.options['goods.GoodsSpu']?.[0]
                      .authenticationText"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="插头规格">
                <el-select
                  v-model="form.plug_specification"
                  clearable
                  placeholder="请选择"
                  class="w-full"
                >
                  <el-option
                    v-for="item in props.options['goods.GoodsSkuSalesInfo']?.[0]
                      .plugSpecificationText"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="销量">
                <!-- <el-input v-model.trim="form.sales_volume_thirty_days" placeholder="请输入" clearable /> -->
                <VGroup>
                  <el-input-number
                    v-model="form.salesRange.start"
                    :controls="false"
                    placeholder="输入"
                    style="width: 148px"
                  />
                  <div class="v-group-item"><svg-icon icon-class="qujian" /></div>
                  <el-input-number
                    v-model="form.salesRange.end"
                    :controls="false"
                    placeholder="输入"
                    style="width: 148px"
                  />
                </VGroup>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="库存">
                <VGroup>
                  <el-input-number
                    v-model="form.inventoryRange.start"
                    :controls="false"
                    placeholder="输入"
                    style="width: 148px"
                  />
                  <div class="v-group-item"><svg-icon icon-class="qujian" /></div>
                  <el-input-number
                    v-model="form.inventoryRange.end"
                    :controls="false"
                    placeholder="输入"
                    style="width: 148px"
                  />
                </VGroup>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </VForm>
    <template #footer>
      <div class="flex justify-between items-center">
        <div>
          <VGroup>
            <el-input v-model.trim="searchName" placeholder="请输入" clearable />
            <el-button type="primary" @click="saveSearch">保存搜索条件</el-button>
          </VGroup>
        </div>
        <div>
          <el-button @click="close">取消</el-button>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" :loading="loading" @click="save()">查询</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="AdvancedSearch">
import { conditionSave } from "../api/index";
import { reactive, toRefs, getCurrentInstance, nextTick } from "vue";
import VForm from "@/components/VForm";
import { ElMessage } from "element-plus";
import SelectLogistics from "@/components/SelectLogistics";
import SelectBrand from "@/components/SelectBrand";
import SelectSupplie from "@/components/SelectSupplie";

const { proxy } = getCurrentInstance();
const emits = defineEmits(["query", "condition"]);
const props = defineProps({
  options: {
    type: Object,
    default: {},
  },
});
const formRef = ref();

const purchaseList = [
  {
    label: "采购价",
    value: "purchase_price",
  },
  {
    label: "最后采购价",
    value: "latest_purchase_price",
  },
  {
    label: "平均采购价",
    value: "average_purchase_price",
  },
];

const weightList = [
  {
    label: "毛重",
    value: "gross_weight_g",
  },
  {
    label: "净重",
    value: "net_weight_g",
  },
  {
    label: "包裹重",
    value: "packing_weight_g",
  },
];

// const options = reactive(inject('options'))
const tableOptins = reactive({
  formConfig: {
    goods_source: "",
    logistics_attributes: "",
    brand_type: [],
    brand_name: "",
    supplier_id: "",
    goods_tag: "",
    purchaseRange: { type: "purchase_price", value: [], range: true },
    weightRange: { type: "packing_weight_g", value: [], range: true },
    plug_specification: "",
    sales_volume_thirty_days: "",
    inventoryRange: { type: "inventory", value: [], range: true },
    salesRange: { type: "sales_volume_thirty_days", value: [], range: true },
  },
});

const data = reactive({
  form: {
    // saleRange: {
    //   start: '',
    //   end: ''
    // }
  },
  openForm: {},
  visible: false,
  loading: false,
  typeList: [],
  searchName: "",
  load: false,
});
const { visible, loading, typeList, searchName, openForm, load } = toRefs(data);
const open = async (form) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  openForm.value = Object.assign({}, form);
  setTimeout(() => {
    formRef.value.setForm(form);
  });
  visible.value = true;
};

const saveSearch = async () => {
  if (!searchName.value) {
    ElMessage.error("请输入");
  }
  try {
    const condition = formRef.value.getForm();
    const res = await conditionSave({
      name: searchName.value,
      condition,
    });
    ElMessage.success(res.message);
    emits("condition");
  } catch (e) {
    throw Error(e);
  }
};
const save = () => {
  const condition = formRef.value.getForm();
  emits("query", condition);
  close();
};
const close = () => {
  visible.value = false;
};

const reset = () => {
  formRef.value.resetForm();
  save();
};

defineExpose({ open });
</script>
